<template>
	<u-overlay :show="showMask" @click="pickerHS">
		<view class="calendar body-max-width">
			<view class="content" @tap.stop>
				<view class="title">
					<view class="left">
						{{showData}}
					</view>
					<view class="sure" @click="sure">
						确定
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="selectValue" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column v-if="isHourShow">
						<view class="item" v-for="(item,index) in lunarHour" :key="index">{{isActive ? item.solar : item.label}}</view>
					</picker-view-column>
          <picker-view-column v-if="isMinuteShow">
          	<view class="item" v-for="(item,index) in lunarMinute" :key="index">{{item.solar}}</view>
          </picker-view-column>
				</picker-view>
				<view class="bottom" v-if="isSwitch">
					<view class="switch">
						<view class="left" :class="{active:isActive}" @click="switchBtn('solar')">
							公历
						</view>
						<view class="right" :class="{active:!isActive}" @click="switchBtn('lunar')">
							农历
						</view>
						<view class="bg" :class="type"></view>
					</view>
				</view>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import conversion from "./calendar.js"
	import lunarHour from "./information.js"
	export default {
		name:"calendar",
		data() {
			return {
				oldYear:1950, //最大年份
				type:"solar", //lunar农历，solar公历
				isActive:true,//true公历
				showData:"",//显示数据
				// showMask:false,
				checked:true,
				years:[],
				months:[],
				days:[],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				lunarHour:[],
        lunarMinute:[],
				date:"",
				hour:"",
				leap_month:0,//1为闰月0为非闰月
				sureYear:"1990", //默认弹出显示年份
				sureMonth:"06",//默认弹出显示月份
				selectValue:[30, 4, 5, 10, 10],//默认弹出选择的状态1990-06-10 10
				showYear:'',
				showMonth:'',
				nextFinally:true
			};
		},
		props:{
			showMask:{
				type:Boolean,
				default:false
			},
			isHourShow:{
				type:Boolean,
				default:true
			},
      isMinuteShow:{
        type:Boolean,
        default:true
      },
			isSwitch:{
				type:Boolean,
				default:true
			}
			// value:{
			// 	type:[Array,Object],
			// 	default:()=>{
			// 		return [30, 5, 9, 10]
			// 	}
			// },
			// birthday:{
			// 	type:Object,
			// 	default:()=>{
			// 		return {
			// 			date: "1990-06-11",
			// 			hour: "6",
			// 			type: "solar"
			// 		}
			// 	}
			// }
			// isActive:{
			// 	type:Boolean,
			// 	default:()=>{
			// 		return true
			// 	}
			// }
		},
		components:{
		
		},
		created() {
			this.getTime();
		},
		methods:{
			pickerHS(){
				this.$emit("close",false);
			},
			// 提交
			sure(){
				if(!this.nextFinally){
					this.$u.toast("别着急，正在选时间");
					return false;
				}
				let data ={
					"text":this.showData, //显示数据
					"type":this.type,
					"brithday":{
						"brithday[date]":this.date,
						"brithday[hour]":this.hour,
						"brithday[type]":this.type,
						"brithday[minute]":this.lunarMinute[this.selectValue[4]].value,
						// "brithday[leap_month]":this.leap_month,
					},
					"newBirthday":{
						brithday:{
							date:this.date,
							hour:this.hour,
							minute:this.lunarMinute[this.selectValue[4]].value,
							type:this.type,
						}
					},
					"date":this.date,
					"hour":this.hour || 0,
					"year":this.showYear,
					"month":this.coverTo(Number(this.showMonth)),
					"day":this.coverTo(this.selectValue[2] + 1),
					"minuteText":this.lunarMinute[this.selectValue[4]].solar,
					"minute":this.lunarMinute[this.selectValue[4]].value,
				}
				if(this.type == 'lunar'){
					data.brithday["brithday[leap_month]"] = this.leap_month;
					data.newBirthday.brithday.leap_month = this.leap_month;
					data.leap_month = this.leap_month;
				}
				this.$emit("sure",data);
				this.nextFinally = true;
			},
			//进来获取公历的1990-02-10 10,初始化
			getTime(){
        this.lunarMinute = [];
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				this.years = [];
				this.days =[];
				this.months = [];
				for (let i = this.oldYear; i <= date.getFullYear() + 30; i++) {
					if(this.isActive){
						this.years.push(i);
					}else{
            this.years.push(i);
						// this.years.push(conversion.toChinaYear(i));
					}
				}
        this.selectValue[0] = this.years.length - 31;
        this.selectValue[1] = month - 1;
        this.selectValue[2] = day - 1;
        console.log(month,"下标11")
				if(this.isActive){
					this.getsolarMonthDays(this.sureYear,this.sureMonth,this.selectValue);
				}else{
					this.getlunarMonthDays(this.sureYear,this.sureMonth,this.selectValue);
				}
				this.lunarHour = lunarHour.lunarHour;
        for(let i = 0; i < 60; i++){
          this.lunarMinute.push({value:i < 10 ? '0' + i : i,solar:i < 10 ? '0' + i + '分' : i + '分'});
        }
			},
			bindChange: function (e) {
				const val = e.detail.value;
				let year = val[0]+this.oldYear,
				month = val[1] + 1,
				day = val[2]+1;
				this.days =[];
				this.months = [];
				this.selectValue = e.detail.value;
				this.nextFinally = false;
				//公历返回每个月天数
				if(this.isActive){
					this.getsolarMonthDays(year,month,val);
				}else{
					this.getlunarMonthDays(year,month,val);
				}
			},
			// D=>DD,M=>MM,日，月转换 1=>01
			coverTo(num){
				return num < 10 ? ("0" + num) : num
			},
			// 获取公历的月份和天数
			getsolarMonthDays(year,month,val){
				console.log(val,"下标")
				for (let i = 1; i <= 12; i++) {
					this.months.push(i+"月");
				}
				for (let i = 1; i <= conversion.solarDays(year,month); i++) {
					this.days.push(i+"日");
				}
				this.leap_month = 0;
				this.date = `${val[0]+this.oldYear}-${this.coverTo(val[1]+1)}-${this.coverTo(val[2]+1)}`;
				this.hour = val[3] - 1;
				let showHour = this.isHourShow ? `${val[3] != 0 ? (val[3] - 1) + '时' : '' }` : '';
				this.showData = `公历 ${val[0]+this.oldYear}年${this.coverTo(val[1]+1)}月${this.coverTo(val[2]+1)}日 ${showHour}`;
				this.showYear = `${val[0]+this.oldYear}`;
				this.showMonth = `${val[1]+1}`;
				setTimeout(e => {
					this.nextFinally = true;
				},200)
			},
			// 获取农历的月份和天数
			getlunarMonthDays(year,month,e){
				let leap_month = conversion.leapMonth(year);
				//返回农历 闰月没有就返回0
				for (let i = 1; i <= 12; i++) {
					this.months.push(conversion.toChinaMonth(i));
					if(i == leap_month){
						this.months.push("闰"+conversion.toChinaMonth(i));
					}
				}
				// 农历返回天数
				// **leapMonth 返回闰月 conversion.leapMonth(year)
				// **monthDays 返回非闰月的天数
				// **leapDays 返回闰月的天数
				if(conversion.leapMonth(year) != 0 && (conversion.leapMonth(year) == month || (month - 1) == conversion.leapMonth(year))){
					for (let i = 1; i <= conversion.leapDays(year,conversion.leapMonth(year)); i++) {
						this.days.push(conversion.toChinaDay(i));
					}
				}else{
					let lunarMonth = '';
					if(conversion.leapMonth(year)){
						lunarMonth = month  < conversion.leapMonth(year) ? month : (month - 1);
					}else{
						lunarMonth = month;
					}
					for (let i = 1; i <= conversion.monthDays(year,lunarMonth); i++) {
						this.days.push(conversion.toChinaDay(i));
					}
				}
        console.log(e,"下标")
				if(e){
					const val = e;
					let year = val[0]+this.oldYear,
					month = val[1],
					day = val[2],
					hour = val[3] ? val[3] : 0,
					m = "",
					d = "",
					h = "";
					m = this.months[month];
					d = this.days[day]
					h = this.lunarHour[hour].value + "时";
					this.leap_month = (month == leap_month && leap_month!=0) ? 1 : 0;
					let lunarToMonth = this.coverTo(leap_month != 0 ? ((month+1) <= leap_month ? (month + 1) : month ) : (month + 1));
					console.log(lunarToMonth,"获取当前月份")
					this.date = `${year}-${lunarToMonth}-${this.coverTo(day+1)}`;
					this.hour = hour - 1;
					let showHour = this.isHourShow ? `${h}` : '';
					this.showData = `农历 ${conversion.toChinaYear(year)}年${m}${d} ${showHour == '24时' ? '' : showHour}`;
					this.showYear = year;
					this.showMonth = lunarToMonth;
				}
				setTimeout(e => {
					this.nextFinally = true;
				},150)
			},
			// 切换公历<=>农历 回显以及切换 this.$refs.yourname.switchBtb(type,data),type:"lunar" or "solar", data:{date:"1992-02-10",hour:3,leap_month:"0",type:"lunar"}
			switchBtn(type,data){
				console.log(type,data,"切换")
				if(data){
					// console.log(data,"回显")
					// 回显
					let year = this.$utils.formatDate(data.date).YYYY;
					let leapMonth = type == 'solar' ? 0 : conversion.leapMonth(year),
						month = this.$utils.formatDate(data.date).MM,
						day = this.$utils.formatDate(data.date).D,
						y = year - this.oldYear,
						// m = leapMonth != 0 ? (Number(month)-1 <= leapMonth ? Number(month) - 1 : Number(month)) : Number(month) - 1,
						m = data.leap_month == 1 ? Number(month) : (leapMonth != 0 ? (Number(month) <= leapMonth ? Number(month) - 1 : Number(month)) : Number(month) - 1),
						d = day - 1,
						h = Number(data.hour)+1;
						// console.log(leapMonth,"是否闰月",m)
					this.leap_month = data.leap_month ? 1 : 0;
					this.type = data.type;
					this.sureYear = year;//默认弹出显示年份
					this.sureMonth = month;//默认弹出显示月份
					// console.log(m,"回显月份")
					this.selectValue = [y, m, d, h];//默认弹出选择的状态1990-06-10 10
					// console.log(m,Number(month),leapMonth)
					// console.log(this.sureYear,this.sureMonth,this.selectValue,"回显")
				}else{
					// 农历公历互相联动切换
					if(this.type == type){
						return false;
					}
					if(type == 'lunar'){ //公历切换为农历
						let solarYear = this.selectValue[0] + this.oldYear; //公历年份
						let leapMonth = conversion.leapMonth(solarYear);
						let	solarMonth = this.selectValue[1] + 1, //公历年月份
							solarDay = this.selectValue[2] + 1, //公历年日份
							hour = this.selectValue[3],
              minute = this.selectValue[4];
						let lunarDate = conversion.solar2lunar(solarYear,solarMonth,solarDay);
						this.sureYear = lunarDate.lYear;//默认弹出显示年份
						this.sureMonth = lunarDate.lMonth;//默认弹出显示月份
						this.leap_month = leapMonth != 0 ? 1 : 0;
						let y = lunarDate.lYear - this.oldYear,
							m = this.leap_month  == 0 ? lunarDate.lMonth - 1 : (this.selectValue[1] < leapMonth ? lunarDate.lMonth - 1 : lunarDate.lMonth ),
							d = lunarDate.lDay - 1;
						console.log(this.leap_month,"显示",leapMonth,lunarDate.lMonth,this.selectValue[1])
						this.selectValue = [y, m, d, hour,minute];//默认弹出选择的状态1990-06-10 10
						// console.log(this.sureYear,this.sureMonth,this.selectValue,"回显农历")
					}else{//农历切换为公历
						let lunarYear = this.selectValue[0] + this.oldYear; //农历年份
						let leapMonth = conversion.leapMonth(lunarYear);//一年中的几月份是闰月
						let	lunarMonth = leapMonth == 0 ? this.selectValue[1] + 1 : ((this.selectValue[1] + 1) <= leapMonth ? (this.selectValue[1] + 1) : this.selectValue[1]), //农历年月份
							lunarDay = this.selectValue[2] + 1, //农历年日份
							hour = this.selectValue[3],
							minute = this.selectValue[4];
						// console.log(this.selectValue[1],"月份index")
						let lunarDate = conversion.lunar2solar(lunarYear,lunarMonth,lunarDay,(leapMonth == this.selectValue[1] ? true : false));
						// console.log(lunarDate,"回显公历全部数据")
						this.sureYear = lunarDate.cYear;//默认弹出显示年份
						this.sureMonth = lunarDate.cMonth;//默认弹出显示月份
						this.leap_month = leapMonth != 0 ? 1 : 0;
						let y = lunarDate.cYear - this.oldYear,
							m = lunarDate.cMonth - 1,
							d = lunarDate.cDay - 1;
						this.selectValue = [y, m, d, hour,minute];//默认弹出选择的状态1990-06-10 10
						// console.log(this.sureYear,this.sureMonth,this.selectValue,"回显公历")
					}
				}
				this.isActive = type == 'solar' ? true : false;
				this.type = type;
				this.getTime();
        this.$emit('onChange',type);
			}
		}
	}
</script>

<style lang="scss">
.u-mask-zoom{
	transform: scale(1, 1);
}
.calendar{
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100%;
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		// height: 100%;
		background-color: #fff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		.title{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 86rpx;
			border-bottom: 2rpx solid #E6E6E6;
			width: 100%;
			justify-content: space-between;
			padding: 0 30rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			/* #ifdef MP-WEIXIN */ 
			margin-top:0;
			/* #endif */
			.left{
				color:#666666;
				font-size: 30rpx;
			}
			.sure{
				color: #5A6CB2;
				font-size: 30rpx;
			}
		}
		picker-view {
		    width: 100%;
		    height: 650rpx;
		    margin-top:20rpx;
			/deep/.item{
						display: flex;
						align-items: center;
						justify-content: center;
						color: #333333;
						font-size: 32rpx;
						font-weight: bold;
					}
			.uni-picker-view-wrapper{
				uni-picker-view-column{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;
					.uni-picker-view-group{
						.uni-picker-view-content{
							text-align: center;
							line-height: 110rpx;
							.item{
								display: flex;
								align-items: center;
								justify-content: center;
								color: #333333;
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
			/deep/.uni-picker-view-indicator{
				// text-align: center;
				// line-height: 110rpx;
			}
		}
		.bottom{
			height: 110rpx;
			width: calc(100% - 31rpx);
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 31rpx;
			background-color: #FFFFFF;
			.switch{
				background-color: #E6E6E6;
				width: 180rpx;
				height: 70rpx;
				display: flex;
				flex-direction: row;
				border-radius: 35rpx;
				justify-content: space-around;
				align-items: center;
				position: relative;
				.left{
					position: absolute;
					z-index: 1;
					left: 25%;
					font-size: 28rpx;
					transform: translateX(-50%);
				}
				.right{
					color: #333333;
					font-size: 28rpx;
					position: absolute;
					right: 0;
					transform: translateX(-25%);
					color: #333333;
					z-index: 1;
				}
				.bg{
					background-color: #5A6CB2;
					color: #333333;
					height: 70rpx;
					border-radius: 40rpx;
					width: 90rpx;
					position: absolute;
					// right: 0;
					top:0;
					z-index: 0;

				}
				.active{
					color: #FFFFFF;
				}
				.lunar{
					left: 90rpx;
					animation: switchsolar 500ms;
				}
				@keyframes switchsolar {
					    0%   {left: 0;}
					    100%  {left: 90rpx;}
				}
				.solar{
					left: 0;
					animation: switchlunar 500ms;
				}
				@keyframes switchlunar {
					    0%   {left: 90rpx;}
					    100%  {left: 0;}
				}
			}
		}
	}
}
</style>
